<template>
	<view>
		<!-- #ifndef APP-NVUE -->
		<view class="uni-list">
			<view style="display: flex;">
				<view class="uni-list_title" v-if="title">{{ title }}</view>
				<view class="uni-list_extra" v-if="extra">{{ extra }}</view>
			</view>
			<slot />
			<view class="uni-list_footer" v-if="label">{{ label }}</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-NVUE -->
		<list class="uni-list" :enableBackToTop="enableBackToTop" loadmoreoffset="15" :scroll-y="scrollY" @loadmore="loadMore">
			<view class="uni-list_title" v-if="title">{{ title }}</view>
			<slot />
			<view class="uni-list_footer" v-if="label">{{ label }}</view>
		</list>
		<!-- #endif -->
	</view>
</template>

<script>
export default {
	name: 'UniList',
	'mp-weixin': {
		options: {
			multipleSlots: false
		}
	},
	props: {
		enableBackToTop: {
			type: [Boolean, String],
			default: false
		},
		scrollY: {
			type: [Boolean, String],
			default: false
		},
		title: {
			type: [String,Number],
			default: ''
		},
		extra:{
			type: [String,Number],
			default: ''
		},
		label: {
			type: String,
			default: ''
		}
	},
	provide() {
		return {
			list: this
		};
	},
	created() {
		this.firstChildAppend = false;
	},
	methods: {
		loadMore(e) {
			this.$emit('scrolltolower');
		}
	}
};
</script>
<style lang="scss" scoped>
.uni-list {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	background-color: $uni-bg-color;
	position: relative;
	flex-direction: column;
	// border-bottom-color: $uni-border-color;
	// border-bottom-style: solid;
	// border-bottom-width: 1px;
}
/* #ifndef APP-NVUE */
.uni-list:before {
	height: 0;
}
.uni-list:after {
	height: 0;
}
/* #endif */
.uni-list_title {
	padding: 15px 15px 9px;
	font-size: 14px;
	color: #888;
	box-sizing: border-box;
}
.uni-list_extra {
	flex: 1;
	text-align: right;
	padding: 15px 15px 9px;
	font-size: 14px;
	color: #888;
	box-sizing: border-box;
}
.uni-list_title::after{
	content: " ";
	  position: absolute;
	  top: 35px;
	  left: 0;
	  width: 200%;
	  height: 200%;
	  transform: scale(0.5);
	  transform-origin: 0 0;
	  pointer-events: none;
	  box-sizing: border-box;
	  border: 0 solid #d9d9d9;
	  border-top-width: 1px;
	  border-bottom-width: 1px;
}
.uni-list_footer {
	padding: 9px 15px 15px;
	font-size: 14px;
	color: #888;
}
</style>
